<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p>芜湖</p>
    </div>
    <button>添加一张图片</button>
    <button>删除p标签</button>
    <button>复制box元素</button>
    <script>
        var box = document.querySelector(".box");
        var pEl = document.querySelector("p");
        var btn = document.querySelectorAll("button");

        btn[0].onclick = function () {
            var imgEl = document.createElement("img");
            imgEl.src = "../img/小米盒子6-6.webp";

            box.appendChild(imgEl);
            // document.body.appendChild(imgEl);

            // 父节点.insertBefore(新的子节点, 作为参考的子节点);
            // 想插入到 p标签的前边
            // box.insertBefore(imgEl, pEl);
        };

        btn[1].onclick = function () {
            box.removeChild(pEl);
        };

        btn[2].onclick = function () {
            // 要复制的节点.cloneNode();
        console.log(box.cloneNode()); // 只复制 box标签 不包含内部元素
        console.log(box.cloneNode(true)); // 会复制 内部元素
        }
    </script>
</body>

</html>